<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>editResource 编辑资源</title>
	</head>
	
	<link rel="stylesheet" href="../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../css/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		.Main{
			width:290px;  			
			margin:0 auto;
			text-align:right;
		}
		.Main p input[type=text],.Main p select{
			background:white;
			outline:none;
			margin-left:5px;
			height:26px;
			width:210px;
			border:1px solid #e0e0ea;
			padding-left:4px;
			border-radius:3px;		
		}
		.Main p select{
			height:28px;
			width:216px;			
		}
		.Main p textarea{
			margin-left:5px;
			width:210px;
			border:1px solid #dadada;
		}
		.Main p{
			margin-top:5px;
		}
		input[type=radio]{
			position:relative;
			top:5px;
			left:5px;
		}
		select{
			width:66px;
			height:28px;
			border:1px solid #dadada;
			margin-right:5px;
			font-family:"微软雅黑";
			margin-top:3px;
		}
		.role span{
			display:inline-block;
			width:225px;
			text-align:left;
			margin-top:7px;
		}
		.role span i{
			background:#fea513;
			margin-left:6px;
		}
		.btn{
			text-align:center;
			padding-top:15px;
			padding-bottom:15px;
			margin-top:10px;
		}
		.btn i{
			margin-right:15px;
		}
		.cancle{
			background:#a1a4a9;
		}
		
		.checkbox{
			margin-left:70px;
			margin-top:10px;
			
			
			padding-top:5px;
			padding-left:5px;
			text-align:left;
		}
		.checkbox label{
			margin-right:10px;
			display:inline-block;
			margin-top:3px;
		}
		.checkbox label img{
		display:inline;
		margin-right:5px;
		}
		.Main .born{
			width:100%;
		  	 margin:auto;
			height:30px;
			margin-top:15px;
			line-height:30px;
			text-align:right;
			padding-left:10px;
		}
		.bornDate{
			padding-right:10px;
		}
		.Main  .borthdate{
		display:inline-block;
		
		}
		.orgnize{
		margin-left:3px;
		}
		.Main  .res{
			width:212px;
			margin-left:65px;
			
			border:1px soild #dadada;
			display:none;
			padding:0px;
			
			margin-top:3px;
			
		}
		.wid{
		margin-left:0px;
		margin-right:0px;
		}
	</style>
	<body>
		<div class='Main'>
			<p style='margin-top:25px;'>资源名称<input  type='text' id="resname"/><span style='color:red;'>*</span></p>
			<p class="orgnize">资源类型
				<select class="wid" id="resourcetype">
					<option value="0">菜单</option>
					<option value="1">按钮</option>
				</select><span style='color:red;'>*</span></p>
			
			<p>资源路径<input readonly  type='text' id="url"/><span style='color:red;'>*</span></p>
			<p>排序<input  type='text' id="seq"/><span style='color:#f1f1f1;'>*</span></p>
			<p>状态<span style='width:224px;display:inline-block;text-align:left;'>
			<input type='radio' name="cstate" value="0" checked/>&nbsp;&nbsp;&nbsp;有效&nbsp;&nbsp;&nbsp;
			<input type='radio' name="cstate" value="1"/>&nbsp;&nbsp;&nbsp;无效
			</span>
			</p>
			<p class="orgnize">上级资源
				<input type="text" readonly class="topres" id="restree"><span style='color:red;'>*</span>			
			</p>
			<div class="res" id="res">
			<p id="treeDemo" class="ztree"></p>
			</div>
			
			<p>备注<textarea id="remarks" style="word-break: break-all; word-wrap:break-word;"></textarea><span style='color:#f1f1f1;'>*</span>
			
			<p class="btn"><i class='Dolo_btn sure'>确认</i><i class='Dolo_btn cancle'>取消</i></p>
		</div>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="../js/jquery.ztree.excheck.js"></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
		<script>
		//________________________________上级资源的处理________________________________________________
		//点击显示隐藏的切换
		$(".topres").click(function(){
			if($("#res").is(":hidden")){
				$("#res").show(500);
			}else{
				$("#res").hide(500);
			}
		});
		
		
		//资源加载
		var setting = {
				check: {
					enable: true,
					chkStyle: "radio",
					radioType: "all"
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {onCheck: getName }
			};
	//点击选中的项，并且写入input中显示出来	
		 function getName(){
			 var name = onCheck().name;
			 $("#restree").val(name)
		 }
	
		 var url = document.location.href.toString();
		 var u = url.split("=");//u[1]为上个页面传过来的id值
			
		 
		var zNodes
		
		$.ajax({
			type:"get",
			url:"../resource/editPage?id="+u[1]+"&temp="+Math.random(),			
			async:false,
			success:function(data){
				data = JSON.parse(data)
				zNodes = data.data.restree;
				
				$("#resname").val(data.data.name);//资源名称
				$("#resourcetype option[value='"+data.data.resourcetype+"']").attr("selected",true); //资源类型
				$("#url").val(data.data.url);//资源路径
				$("#seq").val(data.data.seq);//排序
				$("input[name='cstate'][value='"+data.data.cstate+"']").attr("checked",true);//状态
				$("#remarks").val(data.data.remarks);//备注
				//上级资源的显示
				for(var i=0;i<data.data.restree.length;i++){
					if(data.data.restree[i].checked=="true"){
						$("#restree").val(data.data.restree[i].name);
					}
				}
			}			
		});	
		
		
			
			var code;		
			function setCheck() {
				var type = $("#level").attr("checked")? "level":"all";
				setting.check.radioType = type;
				showCode('setting.check.radioType = "' + type + '";');
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			}
			function showCode(str) {
				if (!code) code = $("#code");
				code.empty();
				code.append("<li>"+str+"</li>");
			}
			
			$(document).ready(function(){
				setCheck();			
				$("#level").bind("change", setCheck);
				$("#all").bind("change", setCheck);
			});
		//________________________________________________________________________________取消
			$(".cancle").click(function(){
				closeWin()
			})
		/*__________________________________________編輯_______________________________________________________*/
			$(".xiugai").click(function(){
				layer.open({
					type: 2,
					title: ['编辑角色','background-color:#00aa98; color:#fff;'],
					shadeClose: true,
					shade: 0.3,
					area: ['100%', '100%'],  
					content: ['../ak/addUser_edit.html'],// iframe的url，no代表不显示滚动条
					end:function(){
					
					}
						
				});
			})

		
			
			
			
			function getRole(data){
				//console.log(data)//得到传过来的value和中文字符串
				role_Idlist=data.value;//角色数组
				var str="";
				$(".checkbox").empty();
				for(var i=0;i<data.text.length;i++){
					str+='<label><img src="../img/pricePlan/ok.png"><span>'+data.text[i]+'</span></label>'
				}
				$(".checkbox").append(str);//将选择的角色追加进去
			    
			}
		
			$(".sure").click(function(){
				 //定义对象，用于盛放数据数据传输
				 var obj={};
				obj.cstate=parseInt($("input[name='cstate']:checked").val());//状态 数字
				if(!onCheck()){
					obj.pId=0;//id
				}else{
					obj.pId=onCheck().id;//id
				}
				obj.id=u[1]-0;
				obj.name=$("#resname").val();//资源名称
				obj.resourcetype=parseInt($("#resourcetype").val());//资源类型
				obj.seq=parseInt($("#seq").val());//排序
				obj.url=$("#url").val();//资源路径
				obj.remarks=$("#remarks").val();//备注
			     //将得到的数据obj传输给后台
			     layer.msg('修改中...', {icon: 16,shade: 0.01});
				 $.ajax({
						type:"post",
						url:"../resource/edit?temp="+Math.random(),
						contentType:'application/json;charset=utf-8',
						data:JSON.stringify(obj),
						async:true,
						success:function(data){
							var data=JSON.parse(data);
							if(data.status.toString()=="1001"){
								layer.msg("添加成功", {icon: 1,time:1000},function(){
									var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
									parent.layer.close(index);//关闭弹窗
								});			
							}else{
								layer.msg(data.message, {icon: 2,time:1000})
							}
						}
					});
		
			 });
		
			
			
			
			
			//_______________________________________________________________获取选中节点的id
		
	        function onCheck(e,treeId,treeNode){
	            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
	            nodes=treeObj.getCheckedNodes(true),
	            obj={},
	            v="";
	            	for(var i=0;i<nodes.length;i++){
	    	            v+=nodes[i].name + ",";
	    	            obj.id=nodes[i].id;
	    	            obj.name=nodes[i].name;
	    	           
	    	            return obj; //获取选中节点的值
	    	           
	    	           }
	           
	       }
		
		</script>
	</body>
</html>
